<template>
  <div>
    <!-- <button class="a" :class="obj">按钮</button>
    <button :style="styleObj">按钮</button>
    <button :style="[d,e]">按钮</button> -->

    <!-- {{num}}--{{numBer}}
    <button @click="btnClk">点击</button> -->

    <!-- <Hello val="123"/> -->
    <!-- <Hello :val="obj"/> -->
    <!-- <Hello val="1"/> -->

    <!-- <input type="text" v-model="txt">--{{txt}}

    <input type="checkbox" v-model="arr" :value="1">1
    <input type="checkbox" v-model="arr" :value="2">2
    <input type="checkbox" v-model="arr" :value="3">3
    <input type="checkbox" v-model="arr" :value="4">4
    <label for="">
      <input type="radio" v-model="gender" name="a" value="男">男
      <input type="radio" v-model="gender" name="a" value="女">女
    </label>
    <button @click="Clk">按钮</button> -->

    <!-- <Hello>
      # == v-slot:
      <template v-slot:h2="{nm}">我是h2--{{nm}}</template>
      <template #h3="{nm}">我是h3--{{nm}}</template>
    </Hello> -->

    <!-- <input v-if="isTrue" type="text" v-focus:abc.bcd="456+123" v-model="txt">
    <button @click="isTrue = false">点击</button> -->

    <!-- {{name | filterFun}}--{{name | filterA}} -->

    <!-- <input type="text" v-model="txt">
    <button ref="btn" @click="Clk">点击</button> -->

    <!-- <Hello v-if="isTrue"></Hello>
    <button ref="btn" @click="isTrue = false">点击</button> -->

    <!-- <ul v-for="(v,i) in numArr" :key="i">
      <li>{{v}}</li>
    </ul>
    <button ref="btn" @click="Clk">点击</button> -->


    <!-- <input type="text" v-model="txt"> -->

    <!-- <input type="checkbox" v-model="arr" :value="1">1
    <input type="checkbox" v-model="arr" :value="2">2
    <input type="checkbox" v-model="arr" :value="3">3
    <input type="checkbox" v-model="arr" :value="4">4 -->

    <!-- <input type="text" v-model="numObj.a"> -->
  </div>
</template>

<script>
import myMixin from "./mixins/mixin"
import Hello from "./components/Hello"
export default {
  data(){
    return {
      isTrue: true,
      obj:{
        b: true,
        c: false
      },
      styleObj: {color : "red"},
      d: {fontSize: "30px"},
      e : {color: "blue"},
      num: 10,
      name: 'hyx',
      txt: 123,
      arr:[],
      gender: '',
      numArr: [1,2,3,4],
      numObj:{
        a:1
      }
    }
  },
  watch: {
    "numObj.a":{
      handler(val,oldval){
        console.log(val,oldval)
      }
    }

    // numObj:{
    //   handler(val,oldval){
    //     console.log(val,oldval)
    //   },
    //   deep: true,
    //   immediate: true
    // }


    // txt(val,oldval){
    //   console.log(val,oldval)
    // }
  },
  beforeCreate() {
    // console.log("beforeCreate") 
  },
  created(){
    // console.log("created")
  },
  beforeMount(){
    // console.log("beforeMount")
  },
  mounted(){
    // console.log("mounted")
  },
  beforeUpdate(){
    // console.log("beforeUpdate")
  },
  updated(){
    // console.log("updated")
  },
  methods: {
    btnClk(){
      return this.num++
    },
    Clk(){
      console.log(this.numArr)
      // 变异数组 push pop shift unshift splice sort reserve等
      // this.numArr.pop()

      // 非变异数组（不改变原数组的） filter concat slice map
      let a = this.numArr.filter(v=>{
        return v > 1
      })
      console.log(a)
      console.log(this.numArr)

      // console.log(this.arr)
      // console.log(this.gender)
      
      // console.log(this.name)    // 相同属性App中的优先级较高（最终显示App中的）
      // this.hello()

      // console.log(this.$refs.btn.style.fontSize = "30px")
    }
  },
  filters: {
    filterFun(value){
      return value + 123
    }
  },
  directives:{
    focus:{
      inserted(el){
        // el.focus()
      },
      update(el,binding,oldVnode){
        // console.log(el)
        // console.log(binding)
        // console.log(oldVnode)
      },
      bind(){
        // console.log("只调用一次")
      },
      unbind(){
        // console.log("解绑是调用")
      }
    }
  },
  computed: {
    numBer(){
      return this.num++
    }
  },
  components:{
    Hello
  },
  mixins: [myMixin]
}
</script>

<style scoped>

</style>